import React, {Component} from 'react';
import './todoList.css'
import storage from '../../model/storage'; // 引入自定义模块

class TodoList extends Component {
    constructor(props) {
        super(props);
        this.state = {  
            list: [
                // {
                //     title: '吃饭',
                //     checked: true
                // },
                // {
                //     title: '睡觉',
                //     checked: true
                // },
                // {
                //     title: '敲代码',
                //     checked: false
                // },
            ]
        };
    }
    addData=()=>{
        // console.log(this.refs.title.value);
        if(!this.refs.title.value){return}
        var tempList = this.state.list;
        var title = this.refs.title.value;
        tempList.push({
            title: title,
            checked: false
        });  // 返回值是一个索引值
        this.refs.title.value = ''; // 让input的值变为空
        this.setState({
            list: tempList
        })

        // 执行缓存数据
        storage.set('todolist',tempList);
        // localStorage.setItem('todolist', JSON.stringify(tempList));
    }
    removeData=(key)=>{
        // console.log(key);
        var tempList = this.state.list;
        tempList.splice(key, 1);
        this.setState({
            list: tempList
        })

        // 执行缓存数据
        storage.set('todolist',tempList);
        // localStorage.setItem('todolist', JSON.stringify(tempList));
    }
    inputKeyUp=(e)=>{
        if(e.keyCode === 13){
            this.addData();
        }
    }
    checkboxChange(key){
        var tempList =this.state.list;
        tempList[key].checked = !tempList[key].checked;
        this.setState({
            list: tempList
        })
        // 执行缓存数据
        storage.set('todolist',tempList);
        // localStorage.setItem('todolist', JSON.stringify(tempList));
    }
    // 生命周期函数 页面加载就会触发
    componentDidMount(){
        // 获取缓存的数据
        var todolist = storage.get('todolist');
        // var todolist = JSON.parse(localStorage.getItem('todolist'));
        if(todolist){
            this.setState({
                list: todolist
            })
        }
    }
    render() {
        return (
            <div>
                <header className="title">React Todolist<input ref="title" onKeyUp={this.inputKeyUp}/><button onClick={this.addData}>增加+</button></header>
                <div className="content">
                    <h2>待办事项</h2>
                    <ul className="list">
                        {
                            this.state.list.map((value, key)=>{
                                if(!value.checked){
                                    return(
                                        <li key={key}>
                                            <input type="checkbox" checked={value.checked} onChange={this.checkboxChange.bind(this,key)}/>{value.title}
                                            ----<button onClick={this.removeData.bind(this,key)}>删除-</button>
                                        </li>
                                    )
                                }
                            })
                        }
                    </ul>
                    <hr/>
                    <h2>已完成事项</h2>
                    <ul className="list">
                        {
                            this.state.list.map((value, key)=>{
                                if(value.checked){
                                    return(
                                        <li key={key}>
                                            <input type="checkbox" checked={value.checked} onChange={this.checkboxChange.bind(this,key)}/>{value.title}
                                            ----<button onClick={this.removeData.bind(this,key)}>删除-</button>
                                        </li>
                                    )
                                }
                            })
                        }
                    </ul>
                </div>
            </div>
        );
    }
}

export default TodoList;